<template>
  <div @click="pauseAudio" v-if="isShow" class="simple-audio-player">
    <el-icon><VideoPause /></el-icon>
  </div>
</template>

<script setup>
import {useAppStore} from "@/store/modules/app";

let audio = new Audio();
let isShow = ref(false);
function playAudio(url) {
  if(audio.url) {
    audio.pause();
  }

  audio.onloadedmetadata = function() {
    isShow.value = true;
    audio.play();
  };

  audio.onerror = function(e) {
    alert(e.message || "音频加载失败");
  };

  audio.onended = function() {
    isShow.value = false;
  }
  audio.src = url;
}

function pauseAudio() {
  audio.pause();
  isShow.value = false;
}

onUnmounted(()=> {
  audio.pause();
  isShow.value = false;
})

defineExpose({
  playAudio
})
</script>

<style lang="scss" scoped >
.simple-audio-player {
  width: 60px;
  height: 60px;
  position: fixed;
  right: 12px;
  bottom: 12px;
  font-size: 60px;
  color: red;
  z-index: 100000;
}
</style>
